<template>
    <el-container>
      <el-header>宠物日记</el-header>
      <el-main>
        <div class="diary-container">
          <el-card v-for="diary in diaries" :key="diary.id" class="diary-entry">
            <div class="diary-header">
              <div class="diary-date">{{ diary.date }}</div>
              <el-button type="text" @click="toggleExpand(diary)">
                {{ diary.expanded ? '收起' : '展开' }}
              </el-button>
            </div>
            <div class="diary-content">
              <div v-if="!diary.expanded">{{ diary.content.slice(0, 100) }}...</div>
              <div v-if="diary.expanded">{{ diary.content }}</div>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        diaries: [
          {
            id: 1,
            date: '2024-05-01',
            content: `亲爱的主人，
  
  我知道你一直很担心我，所以想给你写这封信告诉你我在这里过得很好。这里有一个美丽的花园，我每天都在这里奔跑和玩耍。昨天，我遇到了很多新朋友，我们一起玩得很开心。
  
  我还发现了一家非常棒的餐厅，他们有我最喜欢的牛肉饼和鸡肉。我每天都吃得很饱，生活非常幸福。虽然这里很美好，但我还是有点想念我们一起度过的时光。记得那次我们去海边的旅行吗？那是我最快乐的时刻之一。
  
  请不要担心我，我在这里一切都很好。希望你也能过得开心快乐。我们永远在心里相连。
  
  爱你的， 小宝`,
            expanded: false
          },
          {
            id: 2,
            date: '2024-05-02',
            content: `亲爱的主人，
  
  又过了一天，我想再告诉你一些我在这里的生活。今天，我去了一个新的地方，有一个很大的湖泊，我在湖边散步，风景美极了。湖水清澈见底，我甚至看到了一些漂亮的小鱼。
  
  在这里，我还吃到了一些非常美味的鱼肉，它们真的很好吃。我每天都在这里发现新的美食，每一餐都让我感到满足和快乐。
  
  虽然我很喜欢这里的一切，但我还是会时常想起我们一起在家里的时光。那些我们一起玩耍、一起散步的日子一直在我心中。
  
  请你放心，我在这里过得很开心。希望你也能保持微笑，记得我们的美好回忆。
  
  永远爱你的， 小宝`,
            expanded: false
          }
        ]
      };
    },
    methods: {
      toggleExpand(diary) {
        diary.expanded = !diary.expanded;
      }
    }
  };
  </script>
  
  <style scoped>
  .el-header {
    background-color: #f5f5f5;
    text-align: center;
    font-size: 24px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  
  .el-main {
    padding: 20px;
    background-color: #f9f9f9;
  }
  
  .diary-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .diary-entry {
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  
  .diary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .diary-date {
    font-weight: bold;
    color: #666;
  }
  
  .diary-content {
    color: #333;
    line-height: 1.6;
    white-space: pre-wrap;
  }
  
  .el-button {
    color: #409eff;
    font-size: 14px;
  }
  </style>
  